<template>
<div class="score-edit">
    <el-input
    type="textarea"
    autosize
    placeholder="请输入题目内容"
    v-model="title"
    @change="changeTitle">>
  </el-input>
  <el-checkbox v-model="checked" class="isness" @change="changeNess">必答</el-checkbox> 
  <div class="fill">
    <el-tooltip class="item" effect="light" content="最小分数" :show-after="500" size="mini" placement="top">
      <el-input-number v-model="min" @change="changeGrade" :min="0" :max="10" :step="1" step-strictly label="最小分数" size="mini" style="width: 100px" ></el-input-number>
    </el-tooltip>
    <el-tooltip class="item" effect="light" content="最大分数" :show-after="500" size="mini" placement="top">
      <el-input-number v-model="max" @change="changeGrade" :min="0" :max="10" :step="1" step-strictly label="最大分数" size="mini" style="width: 100px" class="assembly"></el-input-number>
    </el-tooltip>
    <el-tooltip class="item" effect="light" content="输入最小分数和最大分数自动生成选项" :show-after="500" size="mini" placement="top">
      <el-button size="mini" class="assembly" @click="autoFill">√</el-button>
    </el-tooltip>
  </div>
  
  <div v-for="(score, index) in options">
    <score-design
      :text="score.text"
      :grade="score.score"
      :index="index"
      @addOption="addOption(score)"
      @deleteOption="deleteOption(score)"
      @changeText="changeText"
      @changeGrade="changeGrade"
      @upmove="upmove"
      @downmove="downmove"
    >  
    </score-design>
  </div>
  <div class="add-option"><el-button class="add-option" @click="addFinalOption">添加选项</el-button></div>
  <el-button class="finish-edit" @click="finish">完成编辑</el-button>
</div>
  
</template>

<script>
import ScoreDesign from './ScoreDesign.vue'

export default{
  name:'ScoreEdit',
  data(){
   return {
    min: 0,
    max: 0,
   }
  },
  components: {
    ScoreDesign,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    checked: {
      type: Boolean,
      default: true,
    },
    options: {
      type: Array,
      default: [],
    }
  },
  methods: {
    changeTitle() {
      this.$emit('changeTitle',this.title)
    },

    changeNess() {
      this.$emit('changeNess', this.checked)
    },

    finish() {
      this.$emit('finish')
    },

    addOption(option) { 
      this.$emit('addOption', this.options.indexOf(option))
      
    },

    addFinalOption() {
      this.$emit('addFinalOption')
    },

    error(message) {
      this.$notify.error({
          title: '错误',
          message: message,
        });
    },

    deleteOption(option) {
      if(this.options.length > 1)
        this.$emit('deleteOption', this.options.indexOf(option))
      else{
        this.error('选项不可少于一个')
      }
    },


    changeText(data) {
      this.$emit('changeText', data)
    },

    changeGrade(data) {
      this.$emit('changeGrade', data)
    },
    
    upmove(index) {
      this.$emit('upmove', index)
    },

    downmove(index) {
      this.$emit('downmove', index)
    },

    autoFill() {
      this.$emit('autoFill', {min: this.min, max: this.max})
    },
  }
}
</script>

<style scoped>
  .score-edit {
    padding: 10px 40px;
    /* background-color: #E6E6E6; */
  }
  .el-input {
    margin-top: 10px;
  }

  .isness {
    margin-top: 10px;
    --el-checkbox-checked-font-color: black;
    color: black;
  }

  .add-option {
    margin-top: 10px;
  }

  .finish-edit {
    background-color: goldenrod;
    width: 100%;
    margin-top: 10px;
  }

  .assembly {
    margin-left: 8px;
    margin-top: 10px;
    /* margin-right: 4px; */
  }
</style>
